<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息中心</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="chat.css" />

	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">消息中心</h1>
			<a id="feedback" class="mui-icon mui-icon-help mui-pull-right"></a>
		</header>

		<pre id='h'></pre>

		<div id='msg-list' class="mui-content">
			<div class="msg-item" v-bind:class="{ msg-item-self: isSelf }" v-for="item in records" @tap="handlerMsgTap(item)" :msg-type="item.type" :msg-content="item.content" >
				<img class="msg-user-img" src="../../images/logo.png" alt="logo" v-else />
				<div class="msg-content">
					<div class="msg-content-inner">
						<div v-if="item.type === 'text'">
							{{item.content}}
						</div>
						<div v-else-if="item.type == 'url'">
							<a href="item.content">{{item.content}}</a>
						</div>
						<div v-else-if="item.type === 'news'">
							<a href="item.content.detailurl">{{item.content.article}}</a>
						</div>
						<div v-else-if="item.type === 'recipe'">
							<a href="item.content.detailurl">{{item.content.name}}</a>
						</div>
						<div v-else-if="item.type === 'image'">
							<img class="msg-content-image" :src="item.content" style="max-width: 100px;" />
						</div>
						<div v-else-if="item.type === 'sound'">
							<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
							<span class="play-state">点击播放</span>
						</div>
						<div v-else>
							{{item.content}}
						</div>
					</div>
					<div class="msg-content-arrow"></div>
				</div>
				<div class="mui-item-clear"></div>
			</div>
		</div>

		<footer>
			<div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
			</div>
			<label for=""  class="footer-right">
				<i id='msg-type' class="mui-icon mui-icon-mic"></i>
			</label>
		</footer>

		<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div>

		<script src="../../js/mui.js"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="chat.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>